// 自定义配色
import React, { useState } from 'react';
import InputColorPicker from '../InputColorPicker';
import FormItem from 'antd/lib/form/FormItem';
import { filterObjectNullKeys } from 'src/libs/utils';
import DataColor from 'src/pages/AnalyseManage/EditReport/components/EditorStyleType/DataColor';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

interface customColorType {
	item: string;
	color: string;
}

const LineCustomColor = ( props: IProps ) => {
	let { config, form, onValuesChange } = props;
	const [ chartLineColor, setChartLineColor ] = useState( ( config.style && config.style.chartLineColor ) || '#000' );
	const [ gridlineColor, setGridlineColor ] = useState( ( config.style && config.style.chartGridlineColor ) || '#639bff' );

	// 轴线颜色
	const handleChange = ( color ) => {
		setChartLineColor( color );
		form.setFieldsValue( { chartLineColor: color } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	// 网格线颜色
	const handleGridlineColorChange = ( color ) => {
		setGridlineColor( color );
		form.setFieldsValue( { chartGridlineColor: color } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	return (
		<div>
			<FormItem label="轴线颜色" name="chartLineColor" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputColorPicker color={chartLineColor} change={( color ) => handleChange( color )}></InputColorPicker>
			</FormItem>

			<FormItem label="网格线颜色" name="chartGridlineColor" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputColorPicker color={gridlineColor} change={( color ) => handleGridlineColorChange( color )}></InputColorPicker>
			</FormItem>
			{/* {props.config.type !== 'ColumnLine' && (
				<FormItem label="鼠标悬停颜色" name="chartHoverLineColor">
					<InputColorPicker color={hoverLineColor} change={( color ) => handleHoverLineColorChange( color )}></InputColorPicker>
				</FormItem>
			)} */}
			{props.config.type !== 'DoubleYLine' && (
				<DataColor config={config} form={form} onValuesChange={onValuesChange} colorName='customBlockColor'></DataColor>
			)}
			{props.config.type === 'DoubleYLine' && (
				<>
					<DataColor config={config} form={form} onValuesChange={onValuesChange} colorName='customBlockColorLY' labelName='左轴数据颜色'></DataColor>

					<DataColor config={config} form={form} onValuesChange={onValuesChange} colorName='customBlockColorRY' labelName='右轴数据颜色'></DataColor>
				</>
			)}
		</div>
	);
};

export default React.memo( LineCustomColor );
